<template lang="pug">
  div
    svg(width="800px" height="500px" version="1.1" class="map")
      path(fill="transparent" stroke="#00e5ff" stroke-linecap="round" stroke-width="2"
        d="M75 0 L75 14 Q75 20 80 20 L428 18 Q432 18 432 24  L432 90")
    .ball
</template>

<style lang="stylus">
  .map
    background #0b2d45
    position: absolute;
  .ball
    width 8px
    height 5px
    background-color #ffffff
    border-radius 2px
    opacity 0.8
    offset-path path('M75 0 L75 14 Q75 20 80 20 L428 18 Q432 18 432 24  L432 90')
    offset-distance: 0
    animation: red-ball 5s linear alternate infinite;
   @keyframes red-ball
    from
      offset-distance: 0%;
    to
      offset-distance: 100%;
</style>
